<html>
<head>
<script src="jquery.js"></script>
<script>
x=100
y=100
dx=11
dy=13

function step()
{	
	x += dx
	y += dy

	if(x>300-50) dx=-dx
	if(y>500-50) dy=-dy
	if(x<0) dx=-dx
	if(y<0) dy=-dy
	
	$('img').css('left', x)
    $('img').css('top', y)
}

$(document).ready(function(e) {
	window.setInterval('step()', 100)
	
	$(document).mousemove(function(e) {
        $('#muban').css('left', e.pageX)
    });
});
</script>
</head>

<body>
<div style="border:thin solid #000; width:300px; height:500px">
	<img src="ball.jpg" width="50" height="50" style="position:absolute" />
	<div id=muban style="background-color:#C99; width:100px; height:10px; top:500px; left:100px; position:absolute"></div>
</div>
</body>
</html>
